<template>
	<view class="bg">
		<view class="top">
			<u-icon name="arrow-left" color="#000" size="24" @click="toBack()"></u-icon>
			<image @click='goDeil(technician.id)' :src="technician.avatar" style="width: 70rpx; height: 70rpx; border-radius: 50%;margin-left: 20rpx;" mode="">
			</image>
			<view class="name" @click='goDeil(technician.id)'>
				<text class="text1">{{technician.nickname}}</text>
				<view class="name-b">
					<u-icon name="checkmark-circle-fill" color="#4bdb91" size="16"></u-icon>
					<text class="text2">可服务</text>
				</view>
			</view>
			<view class="top-r">
				<view class="interest" v-if="technician.is_collect==0" @click="interest(technician.id)">
					<text>关注</text>
				</view>
				<view class="interest" v-if="technician.is_collect==1" @click="interest(technician.id)">
					<text>取关</text>
				</view>
			</view>
		</view>

		<view class="ablme" @click='swiperClick(list1)'>
			<u-swiper :list="list1" height='300'></u-swiper>
		</view>
		<view class="comment">
			<view class="comment-top">
				<text>{{detile.title}}</text>
				<view class="comment-top1">
					<text>{{detile.created_at}} {{technician.site_city}}</text>
					<view class="distance">
						<u-icon name="map" color="#999999" size="14"></u-icon>
						<text>{{(detile.distance/1000).toFixed(2)}}km</text>
					</view>
				</view>
			</view>

			<view class="title">
				<text>全部评论</text>
			</view>
			<view class="box" v-for="(item,index) in detile.comment">
				<view class="box-l">
					<image :src="item.user_avatar" style="width: 70rpx; height: 70rpx; border-radius: 50%;"
						mode=""></image>
				</view>
				<view class="box-r">
					<text class="text3">{{item.user_nickname}}</text>
					<view class="">
						<text class="text4">{{item.content}}</text>
						
					</view>
					<view class="">
						<text class="text5">{{item.created_at}}</text>
					</view>

				</view>
			</view>

		</view>

		<view class="bottom">
			<u--input placeholder="说点什么..." border="none" maxlength='12' v-model="value" shape='circle'
				style='background-color: #f5f5f5; padding-left:20rpx ;'></u--input>
			<view class="btn" @click="criticize()">
				<text>发送</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [
					
				],
				value: '',
				technician: '',
				id: "",
				latitude: '',
				longitude: '',
				detile:''
			}
		},
		onLoad(id) {
			this.id = id.id
			this.getLat()
		},
		methods: {
			swiperClick(list1){
				console.log(list1)
			uni.previewImage({
				urls:list1
			})	
			},
			toBack() {
				uni.navigateBack(1)
			},
			getDetile(id) {
				this.$http.post('api/dynamic/detail', {
					dynamic_id: id,
					latitude: this.latitude,
					longitude: this.longitude
				}).then(res => {
					console.log(res, '/-********/-*/-/-/-');
					this.list1 = res.images
					this.technician = res.technician
					this.detile=res
				})
			},
			interest(id) {
				this.$http.post('api/collect/technician', {
					tid: id
				}).then(res => {
					console.log(res);
					uni.showToast({
						icon: 'none',
						title: res
					})

					this.getDetile(this.id)

				})
			},
			getLat() {
				let _this = this
				uni.getLocation({
					altitude: false,
					geocode: true,
					type: 'gcj02',
					success: (res) => {
						console.log(res, "打印的res值获取city")
						_this.local = 1
						let {
							latitude,
							longitude,
							address
						} = res;
						if (!address) {
							address = {}
						}
						address.longitude = longitude;
						address.latitude = latitude;
						_this.latitude = address.latitude;
						_this.longitude = address.longitude;
						console.log(_this.longitude, "123")
						_this.getDetile(this.id)


					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			criticize(){
				this.$http.post('api/dynamic/comment',{
					dynamic_id:this.id,
					comment:this.value
				}).then(res=>{
					uni.showToast({
						icon: 'none',
						title: '评论成功'
					})
					this.getDetile(this.id)
					this.value=''
				})
			},
			goDeil(id) {
				uni.navigateTo({
					url: '/bundle/pages/techDeil/techDeil?id=' + id
				})
			},
			


		}

	}
</script>

<style scoped lang="scss">
	.top {
		width: 100%;
		/* #ifdef MP||APP-PLUS */
			margin-top: $MPTop;
		/* #endif */
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 10rpx;
		box-sizing: border-box;

		.name {
			width: 70%;
			height: 100%;
			margin-left: 10rpx;

			.text1 {
				font-size: 30rpx;
			}

			.name-b {
				display: flex;
				font-size: 24rpx;
			}
		}

		.top-r {
			width: 15%;
			font-size: 30rpx;

			.interest {
				border: 1rpx solid #5406CD;
				color: #5406CD;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 20rpx;

			}
		}
	}

	.ablme {
		width: 100%;
		min-height: 300rpx;
		/* background-color: #5406CD; */
	}

	.comment {
		width: 100%;
		min-height: 700rpx;
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		

		.comment-top {
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 120rpx;
			border-bottom: 1rpx solid #E6E6E6;

			.comment-top1 {
				width: 100%;
				height: 50rpx;
				font-size: 24rpx;
				color: #999;
				margin-top: 10rpx;
				display: flex;
				justify-content: space-between;

				.distance {
					display: flex;
					align-items: center;
				}
			}
		}

		.title {
			margin-top: 20rpx;
			font-weight: 700;
			margin-bottom: 30rpx;

		}

		.box {
			margin-top: 20rpx;
			display: flex;

			.box-r {
				min-height: 100rpx;
				margin-left: 20rpx;
				box-sizing: border-box;
				padding-bottom: 20rpx;
				width: 88%;
				border-bottom: 1rpx solid #E6E6E6;
				display: flex;
				flex-direction: column;

				.text3 {
					font-size: 30rpx;
					color: #666666;
				}

				.text4 {
					font-size: 32rpx;
				}

				.text5 {
					margin-left: 20rpx;
					font-size: 24rpx;
					color: #999;
				}
			}
		}

	}

	.bottom {
		width: 100%;
		height: 120rpx;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		border-top: 1rpx solid #d7d6d6;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;

	}

	.btn {
		width: 120rpx;
		height: 60rpx;
		font-size: 28rpx;
		color: #fff;
		background-color: #5406CD;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20rpx;
		margin-left: 20rpx;
		margin-top: 10rpx;
	}
</style>
